<template>
    <div class="goods-list-container">
        <el-form :inline="true" :model="search_form" size="small">
            <el-form-item label="检索关键字">
                <el-input
                    v-model.lazy="search_form.search_word"
                    placeholder="请输入关键字"
                ></el-input>
            </el-form-item>
            <el-form-item label="商品类别">
                <el-select
                    v-model="search_form.category"
                    placeholder="请选择类别"
                    clearable
                >
                    <el-option
                        v-for="item in options"
                        :label="item.label"
                        :value="item.value"
                        :key="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="success" @click="handle_search"
                    >查询</el-button
                >
            </el-form-item>
        </el-form>
        <el-table
            :data="table_data"
            border
            stripe
            style="width: 100%"
            element-loading-text="拼命加载中"
            v-loading="loading"
        >
            <el-table-column
                prop="title"
                label="名称"
                width="300"
            ></el-table-column>
            <el-table-column prop="images" label="图片" width="220">
                <template slot-scope="scope">
                    <el-image
                        style="height: 90px"
                        v-for="(item, i) in scope.row.images"
                        :key="i"
                        :src="item"
                        :preview-src-list="[item]"
                    >
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column prop="category" label="类目">
                <template slot-scope="scope">
                    {{ get_category(scope.row.category) }}
                </template>
            </el-table-column>
            <el-table-column prop="price" label="价格"> </el-table-column>
            <el-table-column prop="price_off" label="折扣价">
                <template slot-scope="scope">
                    {{ scope.row.price_off ? scope.row.price_off : "无" }}
                </template>
            </el-table-column>
            <el-table-column prop="inventory" label="库存量"> </el-table-column>
            <el-table-column prop="sale" label="销量"> </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                        type="primary"
                        class="edit-btn"
                        darken
                        size="mini"
                        @click="handle_edit(scope.$index, scope.row)"
                        >编辑</el-button
                    >
                    <br />
                    <el-button
                        type="danger"
                        darken
                        size="mini"
                        @click="handle_del(scope.$index, scope.row)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <Pager
            :cur_page="search_field.page"
            :total_page="total_page"
            @page_change="page_change"
        />
        <el-backtop target="main" :visibility-height="600">
            <i class="el-icon-arrow-up"></i>
        </el-backtop>
    </div>
</template>

<script>
import { search_category, search_products, del_product } from "@/api"
import Pager from "@/components/Pager"

export default {
    async created() {
        await search_category().then((resp) => {
            this.options = resp.data.map((item) => ({
                label: item.name,
                value: item.id
            }))
        })
        this.loading = true
        search_products(this.search_field).then((resp) => {
            this.table_data = resp.data
            this.total_page = Math.ceil(resp.total / this.search_field.size)
            this.loading = false
        })
    },
    components: {
        Pager
    },
    data() {
        return {
            search_form: {
                search_word: "",
                category: ""
            },
            options: [],
            table_data: [],
            total_page: 1,
            loading: false
        }
    },
    computed: {
        search_field() {
            return {
                searchWord: this.search_form.search_word,
                category: this.search_form.category,
                page: +this.$route.query.page || 1,
                size: +this.$route.query.size || 10
            }
        }
    },
    methods: {
        handle_search() {
            this.loading = true
            if (this.search_field.page !== 1) {
                this.$router.push({
                    name: "GoodsList",
                    query: { page: 1, size: this.search_field.size }
                })
            }
            search_products(this.search_field).then((resp) => {
                this.table_data = resp.data
                this.total_page = Math.ceil(resp.total / this.search_field.size)
                this.loading = false
            })
        },
        page_change(page) {
            this.loading = true
            this.$router.push({
                name: "GoodsList",
                query: { page, size: this.search_field.size }
            })
            search_products(this.search_field).then((resp) => {
                this.table_data = resp.data
                this.loading = false
            })
        },
        get_category(cate_id) {
            return this.options.filter((item) => item.value === cate_id)[0]
                ?.label
        },
        handle_edit(index, row) {
            this.$router.push({
                name: "GoodsEdit",
                params: { goods_id: row.id }
            })
        },
        handle_del(index, row) {
            this.$confirm(`确认删除 ${row.title} ?`, "删除", {
                confirmButtonText: "删除",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                del_product(row.id).then(() => {
                    this.table_data.splice(index, 1)
                    this.$message({
                        type: "success",
                        message: "删除成功!"
                    })
                })
            })
        }
    }
}
</script>

<style lang="less">
.goods-list-container {
    .el-tag,
    .goods-img {
        width: 90px;
        height: 90px;
        margin-right: 7px;
        &:last-child {
            margin-right: 0;
        }
    }
    .edit-btn {
        margin-bottom: 10px;
    }
    .pager-container {
        margin: 25px auto;
    }
    .el-backtop {
        box-shadow: 0 0 2px #6666, 0 0 4px #6666, 0 0 6px #6666, 0 0 8px #6666;
    }
}
</style>
